<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div style="position: relative;">
			<img src="./img/1.png" id="Img" width="300px" height="200px">
			<ul>
				<li><div id="d1" onmouseover="over(0)" onmouseout="OP1()"></div></li>
				<li><div id="d2" onmouseover="over(1)" onmouseout="OP1()"></div></li>
				<li><div id="d3" onmouseover="over(2)" onmouseout="OP1()"></div></li>
				<li><div id="d4" onmouseover="over(3)" onmouseout="OP1()"></div></li>
				<li><div id="d5" onmouseover="over(4)" onmouseout="OP1()"></div></li>
			</ul>
		</div>
		<script>
			var n = 0;
			var Imgn = ["1.png","2.jpg","3.jpg","4.png","5.jpg"];
			
			var times = setInterval(qie,1000);
			function qie(){
				n++;
				n%=Imgn.length;
				document.getElementById("Img").src="./img/"+Imgn[n];
			}
			function OP1(){
				times = setInterval(qie,1000);
			}
			function CN1(){
				clearInterval(times)
			}
			function over(i){
				CN1()
				n=i;
				document.getElementById("Img").src="./img/"+Imgn[n];
			}
		</script>
	</body>
	<style>
		ul{
			display: flex;
			flex-flow: row nowrap;
			list-style: none;
			position: absolute;
			left: 50px;
			bottom: 20px;
		}
		li div{
			width: 12px;
			height: 12px;
			background-color: #eee;
			border: 1px solid black;
			border-radius: 50%;
			margin-right: 5px;
		}
		li div:hover,li div:visited{
			background-color: red;
		}
	</style>
</html>